<template>
  <div class="dd">
    <div class="d1">
      <div class="d1a"><img src="@/views/wzz/register/img/logo.png" alt="" class="i1"></div>
      <div class="d1b"><h2>欢迎注册</h2></div>
      <div class="d1c">新人有礼，注册即享188元大礼包</div>
      <div class="d1d"><span class="s1">已有同程账号？</span></div>
      <div class="d1e"><button class="b1" @click="dl()">登录</button></div>
    </div>
    <div class="d2">
      <div class="d2a">
        <el-steps style="max-width: 800px" :active="tz" align-center class="steps" finish-status="success" >
          <el-step title="填写注册信息"/>
          <el-step title="接受并填写验证码"/>
          <el-step title="注册成功"/>
        </el-steps>
      </div>
    </div>
    <div class="d3">
      <router-view/>
    </div>
  </div>
</template>

<script setup>
import {ref,watch} from 'vue'
import router from "@/router/index.js";
import { useRoute } from 'vue-router';
//pinia
import { useCounterStore } from '@/stores/counter.js'//引入pinia
const route = useRoute()//获取路由
const userStore = useCounterStore()//实例化
const tz=ref(1)//获取pinia中的值
const dl=()=>{
  router.push('/')
}
watch(
    () => route.fullPath,
    (to) => {
      tz.value=userStore.tz
      // 注意：这里的 to 和 from 并不是路由对象，而是路由路径的字符串
      // 如果你需要完整的路由对象，你应该在 watch 回调外部保存对上一个路由和当前路由的引用
      console.log('Route changed');
      console.log('To:', to);
    }
);
</script>

<style scoped>
.dd{
  width: 100%;
  height: 100%;
}
.d1{
  width: 100%;
  height: 130px;
  display:flex;
  justify-content: center;
  align-items: center;
}
.i1{
  width: 183px;
  height: 90px;
  margin-top: 10px;
  margin-left: 20px;
}
.d1a{
  width: 215px;
  height: 100%;
}
.d1b{
  width: 105px;
  height: 100%;
}
.d1c{
  width: 240px;
  height: 26px;
  background-color: #fff0ef;
  color: #ff6257;
  font-size: 14px;
  text-align: center;
  line-height: 26px;
  margin-bottom: 10px;
  border-radius: 0 10px 10px 10px;
}
h2{
  margin-top: 40px;
  font-size: 22px;
  color: #333;
}
.d1d{
  width: 500px;
  height: 100%;
  line-height: 120px;
  font-size: 15px;
  color: #666666;
}
.s1{
  margin-left: 385px;
}
.d1e{
  width: 100px;
  height: 100%;
}
.b1{
  width: 60px;
  height: 28px;
  background-color: white;
  border: 1px solid #DDDDDD;
  color: #666666;
  margin-top: 46px;
}
.d2{
  width: 100%;
  height: 120px;
  font-family: 微軟正黑體;
}
.d2a{
  width: 80%;
  margin: 0 auto;
  padding-top: 15px;
}
.steps{
  margin: 0 auto;
}
</style>